<template>
    <div>
        <!-- 导航条 -->
        <van-nav-bar class="tabs" title="西安美食攻略">
            <template #left>
                <van-icon name="envelop-o" size="22" style="font-weight:bold;" />
            </template>
            <template #right>
                <van-icon name="search" size="22" style="font-weight:bold;" />
            </template>
        </van-nav-bar>

        <!-- 轮播图 -->
        <van-swipe :autoplay="2000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img style="height: 200px;object-fit: cover;width: 100%;display: block;" :src="image" />
            </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <van-grid :border="false" :column-num="5">
            <van-grid-item>
                <van-image @click="$router.push('/home/HuoBao')" :src="require(`../../assets/gongge/gongge2.png`)" alt="" />
                <span>美食餐饮</span>
            </van-grid-item>
            <van-grid-item>
                <van-image :src="require(`../../assets/gongge/gongge5.png`)" alt="" />
                <span>新品上架</span>
            </van-grid-item>
            <van-grid-item>
                <van-image :src="require(`../../assets/gongge/gongge4.png`)" alt="" />
                <span>饮品分类</span>
            </van-grid-item>
            <van-grid-item>
                <van-image :src="require(`../../assets/gongge/gongge3.png`)" alt="" />
                <span>美食专题</span>
            </van-grid-item>
            <van-grid-item>
                <van-image :src="require(`../../assets/gongge/gongge1.png`)" alt="" />
                <span>攻略论吧</span>
            </van-grid-item>
        </van-grid>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>

        <van-grid direction="horizontal" :column-num="2" class="tabs">
            <van-grid-item>
                <div>
                    <span style="color: #97D7FF;">雪梨云耳</span>
                    <p>#清毒解热</p>
                </div>
                <img src="https://img2.baidu.com/it/u=2864525257,2661889927&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                    alt="">
            </van-grid-item>
            <van-grid-item>
                <div>
                    <span style="color: #FF779F;">杨枝甘露</span>
                    <p>#Q弹爽口</p>
                </div>
                <img src="https://p3.itc.cn/q_70/images01/20210726/ea6c153a22594df09c7bbe7d5a640303.jpeg" alt="">
            </van-grid-item>
            <van-grid-item class="grid-item">
                <div>
                    <span style="color: #FF9933;">清凉补水</span>
                    <p>#养精气神</p>
                </div>
                <img src="https://img0.baidu.com/it/u=160733136,1430664583&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
                    alt="">
            </van-grid-item>
            <van-grid-item>
                <div>
                    <span style="color: #CF33CC;">雪耳红枣</span>
                    <p>#滋阴补血</p>
                </div>
                <img src="https://cc.hjfile.cn/cc/img/20181012/2018101212584057962348.JPG" alt="">
            </van-grid-item>
        </van-grid>
        <!-- 灰色空白间距 -->
        <div style="background-color: #EFEFEF;height: 10px;"></div>
        <div style="display: flex;justify-content: space-between;padding: 10px;">
            <div style="display: flex;align-items: center;">
                <i
                    style="width: 5px;height: 20px;background-color: #65A7FD;display: inline-block;margin-top: 5px;margin-right: 5px;"></i>
                <span style="font-size: 15px;">美食餐饮</span>
            </div>
            <span style="font-size: 15px;">更多&nbsp;&nbsp;></span>
        </div>
        <van-card v-for="item in 5" :key="item" num="半年销量976" desc="串串香 ￥67/人" title="小胡同番茄火锅(亲贤店)"
            thumb="https://img2.baidu.com/it/u=1756387062,4269142126&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
            <template #tags>
                <van-tag plain type="primary">“番茄锅底巨浓,好喝”</van-tag>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <b style="font-size: 16px;color: #1855a5;">4.5<span style="font-size: 12px;color: #1855a5;">超棒</span></b>
                <p>
                    <van-tag type="danger">券</van-tag>
                    <b style="color: red;font-weight: bold;">￥88</b>
                    <van-tag color="#ffe1e1" text-color="#ad0000">8.8折</van-tag>
                    <b>100元代金券</b>
                </p>
                <p>
                    <van-tag type="danger">团</van-tag>
                    <b style="color: red;font-weight: bold;">￥88</b>
                    <van-tag color="#ffe1e1" text-color="#ad0000">6.2折</van-tag>
                    <b>【热销】2人串串火锅</b>
                </p>
            </template>
        </van-card>
        
        
    </div>
</template>

<script setup>
//轮播图图片资源
const images = [
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055080592.jpg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055082955.jpg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055086715.jpeg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055083844.jpg'
];
</script>

<style lang="scss" scoped>
span {
    font-size: 11px;
    margin-top: 7px;
    color: #747474;
}

.tabs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 14px;
}

.tabs p {
    font-size: 14px;
    color: #747474;
}

.tabs div {
    box-sizing: border-box;
    padding-right: 10px;
}
</style>